<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="d1"></div>
		<img src="images/2.png" id="tank" style="position: absolute;;left:200px;top:20px;"/>
		<img src="images/1.png" id="ptank" style="position: absolute;;left:1000px;top:20px;width: 48px;"/>
		<script>
//			var tankpath=[];
//			document.onmousemove=function(e){
//				tankpath.push(e.pageX+" "+e.pageY);
//				d1.innerHTML=tankpath;
//			};
			
			var tankpath=["133 0","159 9","182 17","204 26","220 37","232 47","242 58","253 70","261 78","271 87",
			"284 97","303 110","322 121","340 129","361 138","383 146","408 154","440 162","464 166","488 166",
			"509 166","534 166","557 166","583 165","603 161","624 156","646 149","664 143","680 137","697 130",
			"707 126","716 124","724 121","729 121","735 121","740 121","747 123","754 129","762 134","769 139",
			"776 148","786 157","795 167","803 176","812 186","819 195","825 203","834 214","841 222","847 228",
			"851 234","856 241","864 249","870 255","877 261","882 265","888 271","897 278","905 282","911 286",
			"918 289","925 291","931 292","940 292","948 293","960 293","972 293","984 291","995 287","1008 282",
			"1018 276","1028 271","1038 266","1047 260","1055 255","1062 249","1067 246","1072 243","1074 241",
			"1075 240","1076 240","1077 239","1077 239","1077 238","1077 238","1076 238","1076 238","1076 238",]
			var j=0;
			var timer=setInterval(function(){
				if(j==tankpath.length){
					clearInterval;
					return;
				}
				var path=tankpath[j];
				var arr=path.split(" ");
				tank.style.left=arr[0]+"px";
				tank.style.top=arr[1]+"px";
				j++;
			},30)
			
			
			var speed=10;
			document.onkeydown=function(e){
				var code=e.keyCode;
				console.log(e.keyCode);
				if(code==68){
					tank.src="images/2.png";
					tank.style.left=parseInt(tank.style.left)+speed+"px";
				}else if(code==65){
					tank.src="images/1.png";
					tank.style.left=parseInt(tank.style.left)-speed+"px";
				}else if(code==87){
					tank.src="images/3.png";
					tank.style.top=parseInt(tank.style.top)-speed+"px";
				}else if(code==83){
					tank.src="images/4.png";
					tank.style.top=parseInt(tank.style.top)+speed+"px";
				}else if(code==74){
					var bullet=document.createElement("img");
					bullet.src="bullet.png";
					bullet.style.width="22px";
					bullet.style.position="absolute";
					var tx=parseInt(tank.style.left);
					var ty=parseInt(tank.style.top);
					bullet.style.left=(tx+46)+"px";
					bullet.style.top=(ty+24-7)+"px";
					document.body.appendChild(bullet);
					
					var timer=setInterval(function(){
						bullet.style.left=parseInt(bullet.style.left)+speed+"px";
						if(parseInt(bullet.style.left)>1000){
							ptankbomb()
							clearInterval(timer);
							document.body.removeChild(bullet);
						}
					},100)
				}
			};
			
			var i=1;
			function ptankbomb(){
				var music=new Audio();
				music.src="m.mp3";
				music.play();
				var timer=setInterval(
					function(){
						if(i==4){
						clearInterval(timer);
						document.body.removeChild(ptank);
						return;
						}
						ptank.src="bomb_"+i+".gif";
						i++;
					},30)
			}
		</script>
	</body>
</html>
